<template>
    <div class="all">
        <!-- 静态内容只渲染一次 -->
        <div v-once>{{ values }}</div>

        <!-- 只有当id改变的时候才会重新渲染 -->
        <div v-for="item in user" :key="item.id" v-memo="[item.id]">
            {{ item.name }} - {{ item.age }}
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
const values = ref(1);
const user = ref([
    { name: '张faefa', age: 18, id: 1 },
    { name: '王五', age: 234, id: 2 },
]);

onMounted(() => {
    values.value = 2;
    console.log(values.value);

    user.value = [
        { name: '张三', age: 18, id: 1 },
        { name: '王五', age: 234, id: 2 },
    ];
});
</script>
